<template>
  <div class="p-5">
    <div class="text-right">
      <el-button type="primary" @click="handleAddUser">新增用户</el-button>
    </div>
    <el-table :data="users" style="width: 100%" :border="true" class="mt-5">
      <el-table-column prop="userId" label="用户ID" align="center" />
      <el-table-column prop="userAccount" label="用户账号" align="center" />
      <el-table-column prop="userPassword" label="用户密码" align="center" />
      <el-table-column prop="userType" label=" 用户类型" align="center" />
      <el-table-column prop="userPhone" label="用户电话" align="center" />
      <el-table-column prop="registerTime" label="注册时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="warning" icon="Edit" title="修改用户信息" @click="handleEditUser(scope.row)">修改</el-button>
          <el-popconfirm :title="`你确定要删除属性吗`" width="200px" @confirm="deleteUser(scope.row.userId)">
            <template #reference>
              <el-button type="danger" icon="Delete" title="删除用户">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog :title="dialogType === 'add' ? '新增用户' : '编辑用户'" v-model="dialogVisible" width="30%" align-center>
      <template #default>
        <el-form label-width="120px">
          <el-form-item label="用户账号" prop="name">
            <el-input placeholder="请输入用户账号" v-model="formData.userAccount" />
          </el-form-item>
          <el-form-item label="用户密码" prop="description">
            <el-input placeholder="请输入用户密码" v-model="formData.userPassword" />
          </el-form-item>
          <el-form-item label="用户电话" prop="description">
            <el-input placeholder="请输入用户电话" v-model="formData.userPhone" />
          </el-form-item>
          <el-form-item label="请选择用户类型" prop="description">
            <el-radio-group v-model="formData.userType">
              <el-radio :value="0">普通用户</el-radio>
              <el-radio :value="1">商家</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="formData.userType == 1" label="店铺名称" prop="description">
            <el-input placeholder="请输入店铺名称" v-model="formData.sellerName" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="flex justify-end gap-2 px-4 pb-4">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { deleteUserApi, getUsersApi, registerApi, updateUserApi } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
const dialogVisible = ref(false)
const dialogType = ref('add'); // 'add' 或 'edit'
const users = ref([])
const formData = ref({
  userId: '',
  userAccount: '',
  userPassword: '',
  userPhone: '',
  userType: '',
  sellerName: ''
})
const getUsers = async () => {
  try {
    let res = await getUsersApi()
    users.value = []
    res.data.forEach(item => {
      let userType = item.userType == 0 ? '普通用户' : "商家"
      users.value.push({ ...item, userType })
    })
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}
// 新增用户
const handleAddUser = () => {
  dialogType.value = 'add';
  dialogVisible.value = true;
  formData.value = {
    userId: '',
    userAccount: '',
    userPassword: '',
    userPhone: '',
    userType: 0,
    sellerName: ''
  }
};
// 编辑用户
const handleEditUser = (user) => {
  dialogType.value = 'edit';
  dialogVisible.value = true;
  let userType = user.userType == '普通用户' ? 0 : 1
  formData.value = { ...user, userType };
};
const confirm = async () => {
  if (!formData.value.userId) {
    try {
      await registerApi(formData.value)
      ElMessage.success('新增成功');
      getUsers()
      dialogVisible.value = false;
    } catch (error) {
      console.log(error)
      ElMessage.error('新增失败');
      dialogVisible.value = false;
    }
  } else {
    try {
      await updateUserApi(formData.value)
      ElMessage.success('修改成功');
      getUsers()
      dialogVisible.value = false;
    } catch (error) {
      ElMessage.success('修改失败');
      dialogVisible.value = false;
    }
  }
}
const deleteUser = async (id) => {
  try {
    await deleteUserApi(id)
    ElMessage.success('删除成功');
    getUsers()
  } catch (error) {
    ElMessage.error('删除数据失败');
  }
}
onMounted(() => {
  getUsers()
})
</script>

<style lang="scss" scoped></style>